<template>
  <div>
      <Swipe :autoplay="autoplay" :width="width" :height="height">
          <SwipeItem v-for="(item,index) in images" :key="index">
              <img :src="item" :style="swiperStyle">
          </SwipeItem>
      </Swipe>
  </div>
</template>
<script>
// 按需引入
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/index.css';
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    // 需要注册组件
    components:{
        Swipe,
        SwipeItem
    },
    props:{
        // 接收在home页面传来的img数据
      images:{
        type:Array,
        required:true,
        validator:function(images){
            return images.length !== 0;
        }  
      },
      // 自定义属性
      autoplay:{
          type:Number | String,
          default:3000
      },
      width:{
          type:String,
          default:"auto"
      },
      height:{
          type:String,
          default:"auto"
      }
    },
    computed:{
        // 计算自定义样式
        swiperStyle:function(){
            return {
                width:"100%",
                height:"160px",
            }
        }
    },
}
</script>

<style>

</style>